<template>
  <div style="display: flex;">
    <div style="width: 15%;">
      <el-row class="tac">
        <el-col>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-submenu
              v-for="(residence, residenceIndex) in houseMenus"
              :key="residence.residenceId"
              :index="(residence.residenceId) + '-' + (residenceIndex + 1)"
            >
              <template slot="title">
                <span>{{ residence.residenceName }}</span>
              </template>
              <el-menu-item-group
                v-for="building in residence.buildingMenuVoList"
                :key="building.buildingId"
              >
                <template slot="title">{{ building.buildingName }}栋</template>
                <el-menu-item
                  v-for="(item, itemIndex) in building.elementList"
                  :key="item.id" :index="(item.id) + '-' + (itemIndex + 1)"
                  @click="getHouseMessage( item.id, residence.residenceName, building.buildingName, item.elementName)"
                >
                  {{ item.elementName }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div style="width: 5%;"></div>
    <div style="width: 80%;">
      <h1>{{ exactValue }}</h1>
      <div style="display: flex">
        <el-card
          class="box-card"
          v-for="o in houseList"
          :key="o"
          style="width: 150px;margin-right: 20px;">
          <div style="text-align: center;line-height: 37px">
            {{o.roomNumber}}<br>
            房屋人数：{{o.occupancy}}<br>
            <el-tag type="success">{{o.name}}</el-tag><br>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getMenuMessage } from '@/api/system/residence'
import { houseListByElement } from '@/api/system/house'

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      MenuMessageRequest: {
        residenceId: null,
        buildingId: null
      },
      activeIndex: '2',
      houseMenus: [
        {
          residenceId: null,
          residenceName: '',
          buildingCount: null,
          buildingMenuVoList: [
            {
              buildingId: null,
              buildingName: '',
              elementCount: null,
              floors: null,
              houseCount: null,
              populationCount: null,
              residenceId: null,
              elementList: [
                {
                  id: null,
                  elementName: '',
                  buildingId: null
                }
              ]
            }
          ]
        }
      ],
      houseList: [],
      exactValue: "",
    }
  },
  //方法集合",
  methods: {
    getMenuMessage() {
      getMenuMessage(this.MenuMessageRequest).then(response => {
        this.houseMenus = response.data
        console.log(this.houseMenus)
      })
    },
    getHouseMessage(id,residenceName,buildingName,elementName) {
      this.exactValue = residenceName+buildingName+"栋"+elementName
      houseListByElement(id).then(response => {
        this.houseList = response.data
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getMenuMessage()
  }
}
</script>

<style scoped>
</style>
